<template>
  <s-layout id="layout" :title="'账户流水明细'" navbar="normal" leftIconColor="#333" :autoBack="false"
    :bgColor="state.bgColor" :tabbarshow='false' :titleStyle="{ color: '#333', fontSize: '32rpx' }">
    <view class="call_on" :style="{ paddingTop: (safeAreaInsets?.top + 44) + 'px' }" v-if="detailList">
      <view class="public content">
        <view class="tab">
          <view class="img_title">
          <image :src="`${baseUrl}` + detailList.logo" class="bankimg"
                  mode="scaleToFill" />
          <view class="names">{{ detailList.title }}{{ detailList.bank_num ? `(${detailList.bank_num.slice(-4)})` : '' }}</view>
        </view>
        <view class="update">{{ sheep.$helper.timeFrom(detailList.updatetime) }}</view>
        </view>
        <view class="subtitle">
          <view class="title_name" @tap="dateScreen">
            {{ state.date ? state.date : '日期筛选' }}
            <up-icon name="play-right-fill" color="#666" size="14"></up-icon>
          </view>
          <view class="title_name" @tap="chooseType">
            {{ state.type }}
            <up-icon name="play-right-fill" color="#666" size="14"></up-icon>
          </view>
        </view>
        <view class="list">
          <view class="item_col_3">
            <view class="title">期初余额</view>
            <view class="money">{{ detailList.initial_balance }}</view>
          </view>
          <view class="item_col_3">
            <view class="title">合计收入</view>
            <view class="money">{{ detailList.total_inc_money }}</view>
          </view>
          <view class="item_col_3">
            <view class="title">期末余额</view>
            <view class="money">{{ detailList.ending_balance }}</view>
          </view>
        </view>
        <!-- 列表内容 -->
        <scroll-view scroll-y class="comprehensive" v-if="list.length" @scrolltolower='listScrolltolower'>
        <view class="item_wrap">
          <view class="item" v-for="(item, index) in list" :key="index">
            <image class="flex_img" v-if="item.type == 'dec'" :src="`${baseUrl}/uploads/uniapp_image/staff/zhanghuliushui_icon_1.png`" mode="scaleToFill" />
            <image class="flex_img" v-if="item.type == 'inc'" :src="`${baseUrl}/uploads/uniapp_image/staff/zhanghuliushui_icon_2.png` " mode="scaleToFill" />
            <view class="item_left">
              <view class="title">
                {{ item.title }}
              </view>
              <!-- 有时分秒 创建时间 -->
              <!-- <view class="date">{{ formatDatetime(item.createtime) }}</view> -->
              <!-- 无时分秒 ... -->
              <view class="date">{{ item.date }}</view>
            </view>
            <view class="item_right">
              <view :class="item.type == 'dec'?'gray':'hint'">
                <text>{{ item.type == 'dec'?'-':'+' }}</text>
                {{ item.money }}
              </view>

            </view>
          </view>
        </view>
        </scroll-view>
        <u-empty v-else mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" text="暂无内容"
        marginTop="20%"></u-empty>
      </view>
    </view>
  
  </s-layout>
  <!-- 时间筛选 -->
 <!-- 日期 范围 -->
 <up-calendar
 :allowSameDay="true"
      :maxDate="calendar.maxDate"
      :minDate="calendar.minDate"
      :monthNum="calendar.monthNum"
 :closeOnClickOverlay="true" :show="show_scope" :mode="mode_scope" @confirm="confirm_scope" @close="close_scope"></up-calendar>
 <!---选择类型-->
 <up-action-sheet :show="showStatus" :actions="showStatusActions" title="请选择类型" @close="showStatus = false"
    @select="statusSelect" :round="18" :closeOnClickAction="true">
  </up-action-sheet>
</template>

<script setup>
import { baseUrl } from '@/sheep/config';
import sheep from '@/sheep';
import { onLoad } from "@dcloudio/uni-app";
import { ref } from 'vue';
import { formatDatetime,formatDate} from '@/utils/fn.js';
const { safeAreaInsets } = uni.getSystemInfoSync()
const state = ref({
  bgColor: '#fff',
  date:'',
  datelist:'',
  type:'全部明细类型'
})
 // 设置默认日期，最大值为今天，最小值为今年元旦
const  calendar = ref({
        minDate: '',
        maxDate: '',
        defaultDate: '',
        monthNum: 13,
      })
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      if (month <= 9) {
        month = '0' + month;
      
      }
      if (day <= 9) {
        day = '0' + day;
      }
     
      let minyear = year - 1;
      calendar.value.minDate = year + '-' + '01' + '-' +  '01';
      calendar.value.maxDate = year + '-' + month + '-' + (day + 1);
      // calendar.value.defaultDate = year + '-' + month + '-' + day;
      // calendar.value.defaultDate = `${year + '-' + month + '-' + '01'} - ${calendar.value.maxDate}`;
      // calendar.value.defaultDate = `[year + '-' + month + '-' + '01', year + '-' + month + '-' + day]`;
      calendar.value.defaultDate = [`${year}-${month}-01`, `${calendar.value.maxDate}`]
const detailList =  ref()
onLoad((options) => {
  list.value = [];
  listpagenumber.value = 1;
  detailList.value = options
  // state.value.date =   calendar.value.defaultDate;
  // state.value.date = `${year + '-' + month + '-' + '01'}~${calendar.value.maxDate}`;
  getView()
})
//请求数据
const list = ref([])
const listPage = ref()
const listlast_page = ref();
const listpagenumber = ref(1);
const getView = async () => {
  let obj = {
			type:is_entry.value,
      date:state.value.datelist 
		};

		let params = {
			filter: JSON.stringify(obj),
			op: JSON.stringify({
				type: '=',
        date: 'in',
			}),
			page: listpagenumber.value,
      account_id: detailList.value.id,
		};
   
  const res = await sheep.$api.account_statement.getAccountStatementView(params)
  list.value = [...list.value, ...res?.data.rows];
    listPage.value = res.data.current_page
    listlast_page.value = res.data.last_page

}

const loadmoreRef = ref()
//滚动触底
const listScrolltolower = () => {
  loadmoreRef.value.PopupScrolltolower()
  if (listPage.value < listlast_page.value) {
    listpagenumber.value += 1;
  } else {
    return;
  }
  getListDetail();
};
//筛选时间
const dateScreen = () => {
  show_scope.value = true
}
// 日期选择

  // 范围
  const mode_scope = ref('range')
  const show_scope = ref(false)
  const confirm_scope = (e) => {
    state.value.date = `${e[0]}~${e[e.length - 1]}`
    state.value.datelist = e.join(',')
    show_scope.value = false
    list.value = [];
    listpagenumber.value = 1  ;
    getView()
  }
  const close_scope = () => {
    show_scope.value = false
  }
 //选择类型
 const chooseType = ()=>{
    showStatus.value = true
  }
  const showStatus = ref(false)
  const showStatusActions = ref([
  { name: '全部明细类型', type: '' },
  { name: '收入', type: 'inc' },
  { name: '支出', type: 'dec' },
])
// 定义方法  状态
const is_entry = ref()
function statusSelect(e) {
    is_entry.value = e.type
  state.value.type = e.name
  showStatus.value = false
  list.value = [];
  listpagenumber.value = 1;
  getView()
  
}
</script>

<style lang="scss" scoped>
// 滚动
.comprehensive {
  width: calc(100% - 40rpx);
  background-color: rgba(0, 0, 0, 0);
  height: 66vh;
  margin: 0 20rpx;
}

//列表
.call_on {
  width: 100%;
  height: 89vh;
}

.public {
  width: 96%;
  margin: 30rpx auto;
  border-radius: 16rpx;
  background-color: #FFFFFF;
  box-shadow: 0 4rpx 8rpx 0 rgba(0, 0, 0, 0.05);

}



.content {
  margin: 20rpx auto;

  .tab {
    width: 100%;
    border-bottom: 1rpx solid #efefef;
    height: 130rpx;
    display: flex;
    justify-content: space-between;
  align-items: center;
    border-radius: 8px;
      background-color: #FFFFFF;
      box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
      .names {
    padding-left: 10rpx;
    color: $uni-text-color;
    font-weight: 500;
    font-size: 30rpx;
  }

  .update {
    padding-right: 30rpx;
    color: #666666;
    font-weight: 500;
    font-size: $uni-font-size-sm;
  }


  }

  .subtitle {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 90rpx;

    .title_name {
      display: flex;
      color: $uni-text-color;
      font-weight: 500;
     font-size:$uni-font-size-26;
      justify-content: center;
      width: 50%;
    }
  }

  .list {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 150rpx;

    .item_col_3 {
      width: 33.3%;
      text-align: center;

      .money {
        color: #FF0000;
        font-weight: 500;
        font-size: 30rpx;
      }

      .title {
        color: #999999;
        font-weight: 500;
        font-size: $uni-font-size-sm;
        margin-bottom: 20rpx;
      }

      &:nth-child(2) {
        .money {
          color: $uni-color-primary;
        }
      }
    }
  }

  //内容
  .item_wrap {
  

    .item {
      display: flex;
      margin-left: 30rpx;
      align-items: center;
      margin-bottom: 20rpx;
      height: 140rpx;

      .flex_img {
        width: 60rpx;
        height: 60rpx;
        border-radius: 50%;
        margin-right: 16rpx;
      }

      .item_left {
        width: 63%;
        display: flex;
        flex-direction: column;

        .title {
          color: $uni-text-color;
          font-weight: 500;
         font-size:$uni-font-size-26;
          margin-bottom: 10rpx
        }

        .date {
          color: #999999;
          font-weight: 400;
          font-size: $uni-font-size-sm;
        }
      }

      .item_right {
        .hint {
          color: $uni-color-primary;
          font-weight: 500;
          font-size: 15px;
        }

        .gray {
          color: #999;
          font-weight: 500;
          font-size: 15px;
        }
      }
    }
  }
}
    //银行卡图片
    .bankimg {
       width: 50rpx;
       height: 50rpx;
       border-radius: 50%;
     }
     .img_title{
      display: flex;
      height: 60rpx;
      align-items: center;
      margin-left: 30rpx;
     }
     @import '../compentns/up_sheet.scss';
:deep(.u-empty){
  padding-bottom: 90rpx !important;
}
</style>